<template>
  <div style="width: 1000px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px;">
    <!-- 标题栏 -->
    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 12px;">
      <h2 style="color: #333; font-size: 20px; margin: 0;">物品领用申请</h2>
      <div style="color: #666; font-size: 14px;">拟稿时间：2024-07-01 16:26:15</div>
    </div>

    <!-- 导航标签 -->
    <div style="display: flex; gap: 30px; margin: 20px 0; border-bottom: 1px solid #eee;">
      <div style="padding: 10px 0; border-bottom: 2px solid #1a5cff; color: #1a5cff;">申请表单</div>
    </div>

    <!-- 个人信息 -->
    <div style="display: flex; gap: 30px; margin-bottom: 20px;">
      <div style="flex: 1;">
        <div style="color: #666; margin-bottom: 8px;">姓名</div>
        <el-input :value="userName" readonly style="width: 100%;"/>
      </div>
      <div style="flex: 1;">
        <div style="color: #666; margin-bottom: 8px;">部门</div>
        <el-input :value="formData.department" readonly style="width: 100%;"></el-input>
      </div>
    </div>

    <!-- 物品表格 -->
    <div style="margin-bottom: 20px;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
        <div style="color: #333; font-weight: 500;">物品列表</div>
        <el-button @click="addItem" style="background: #1a5cff; color: white;">+ 新增</el-button>
      </div>

      <el-table :data="formData.items" style="width: 100%;">
        <el-table-column label="序号" width="80">
          <template #default="{ $index }">{{ $index + 1 }}</template>
        </el-table-column>

        <el-table-column label="物品*">
          <template #default="{ row }">
            <el-input v-model="row.itemName" placeholder="请输入物品名称"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="领用数量*" width="150">
          <template #default="{ row }">
            <el-input-number v-model="row.quantity" :min="1" style="width: 100%"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="是否归还" width="150">
          <template #default="{ row }">
            <el-select v-model="row.returned"
                       style="width: 100%">
              <el-option label="不需要" value=0 ></el-option>
              <el-option label="需要" value=1></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template #default="{ $index }">
            <el-button link type="danger" @click="removeItem($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 操作按钮 -->
    <div style="display: flex; gap: 15px; justify-content: flex-end;">
      <el-button type="primary" style="background: #1a5cff;" @click="submitForm">提交</el-button>
      <el-button @click="saveForm">保存</el-button>
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import qs from "qs";
import axios from "axios";


const userName =getUser().username;

const addItem = () => {
    formData.value.items.push({ itemName: '', quantity: 1, returned: '' })
}
const formData = ref({
    userId:getUser().id,
    department:'研发部',
    items:[{ itemName: '', quantity: 1, returned:'' }]
})
//保存草稿
let isDraft = false;
//提交数据
const submitForm = ()=>{
    axios.post(BASE_URL + '/v1/administration/goods/application',formData.value)
    localStorage.removeItem("equipment");
    localStorage.removeItem("equipmentIsDraft");
    isDraft = false;
    window.history.back();
}

const removeItem = (index) => {
    formData.value.items.splice(index, 1)
}

//保存表格内容
const saveForm = ()=>{
    isDraft = true;
    localStorage.setItem("equipment",JSON.stringify(formData.value))
    localStorage.setItem("equipmentIsDraft",JSON.stringify(isDraft));
    window.history.back();
}

//返回上个页面
const back = ()=>{
    window.history.back();
}

onMounted(()=>{
    //判断是否有该字段，并是否为true
    if(localStorage.getItem("equipmentIsDraft")){
        formData.value =  JSON.parse(localStorage.equipment)
    }
})
</script>

<style>
/* 覆盖Element Plus默认样式 */
.el-table th.el-table__cell {
  background-color: #f8f9fa;
}
.el-table td.el-table__cell {
  padding: 12px 0;
}
</style>